<template>
	<view class="loginIn-page">
		<image class="ag" src="../../static/image/b.jpg"></image>
		<view class="content">
		<view class="login">
			<view class="login-title">农家乐管理系统登录</view>
			<view class="login-inp">
				<image src="../../static/image/user.png"></image>
				<input v-model="utel" placeholder-class="ps" placeholder="邮箱/手机号" />
			</view>
			<view class="login-inp">
				<image src="../../static/image/password.png"></image>
				<input v-model="upassword" placeholder-class="ps" password placeholder="密码" />
			</view>
			<view class="bg">
			<text class="login-register">我要注册</text>
			<text class="login-forget">忘记密码?</text>
			<checkbox :checked="remember" class="login-remember" @click="rememberPwd">记住密码</checkbox>
			</view>
			<view class="button">
			<text @click="redirectTofirst" class="login-btn">登录</text>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
	    	data() {
	    		return {
	    				
	    		}
	    	},
	    	methods: {
	    		//redirectToSecond 事件方法
	    		redirectTofirst(){
	    			// 跳转之后，页面不会带返回键，且用户不能返回
	    			//redirectTo 使用场景：登录成功之后，（当用户已经登录，则以后都不需要登录页面）
	    			// uni.redirectTo({
	    			// 	url:'/pages//input/input'
	    			// })
	    			uni.switchTab({
	    				url:'/pages/first/first'
	    			})
	    		}
	    	}
	    }
</script>

<style>
	.ag{
		/* 填充整个页面 */
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.content{
		/* 可以用定位 absolute 一旦有元素设置为绝对定位，那么元素的性质将会改变 */
		position: absolute;
		/* 注意：如果不使用top left right bottom属性，绝对定位的位置将会不变 */
		top: 0rpx;
		width: 100%;
		height: 100%;
		font-size: 50rpx;
		/* 颜色：transparent 透明色 */
		/* background-color: transparent; */
		/* rgba（red,green,blue,alpha） alpha 透明度（0~1） */
		background-color: rgba(0, 0, 0, 0.3);
	}
	.loginIn-page{
		/* 定位可以改变区域大小至全屏 */
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #00A3BC;
		/* 弹性容器 */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.login{
	//width: 90%;
	//height: 80%;
	/* a就是透明度 0完全透明~1不透明 */
	//background-color: rgba(255, 255, 255,0.9);
	/* 设置圆角 */
	//border-radius: 50rpx;
	/* 弹性容器 */
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	align-items: center; 
	} 
	/* 标题 */
	.login-title{
		font-size: 40rpx;
		color: #00A3BC;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}
	/* 输入框 */
	.login-inp{
		/* 字体默认大小40rpx + 20*2rpx + 4*2rpx = 88rpx */
		display: flex;
		border: 4rpx solid #00A3BC;
		padding: 20rpx;
		/* 设置圆角 */
		border-radius: 44rpx ;
		/* 设置长度 */
		width: 60%;
		margin-bottom: 30rpx;
	}
	.login-inp image{
		width: 40rpx;
		height: 40rpx;
		flex: 1;
	}
	.login-inp input{
		flex: 5;
	}
	/* 提示文字的颜色 */
	.ps{
		color: #00A3BC;
		font-weight: bold;
	}
	/* 按钮 */
/* 	.login-btn{
		margin-top: 50rpx;
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #01C0D4;
		color: white;
		border-radius: 44rpx;
	} */
	/* 忘记密码 */
	.bg{
		display: flex;
		justify-content: center;
		font-size: 40rpx;
	}
	.login-register{
		/* align-self 设置元素自身在弹性容器中的位置 */
		align-self: flex-end;
		margin-right: 120rpx;
		color: #00A3BC;
	}
	.login-forget{
		/* align-self 设置元素自身在弹性容器中的位置 */
		align-self: flex-end;
		margin-right: 50rpx;
		color: #00A3BC;
	}
	.login-remember{
		/* align-self 设置元素自身在弹性容器中的位置 */
		align-self: flex-end;
		margin-left: 50rpx;
		color: #00A3BC;
	}
.button{
		margin-top: 50rpx;
		width: 70%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #01C0D4;
		color: white;
		border-radius: 44rpx;
	}
	.login-btn{
		display: flex;
		justify-content: center;
	}
</style>